import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

const Line = () => {

    const data = [];

    for (let i = 0; i <= 360; i++) {
        const t = i / 180 * Math.PI;
        const r = Math.sin(2 * t) * Math.cos(2 * t);
        data.push([r, i]);
    }

    const option = {
        title: {
            text: '极坐标双数值轴'
        },
        legend: {
            data: ['line']
        },
        polar: {
            center: ['50%', '54%']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        angleAxis: {
            type: 'value',
            startAngle: 0
        },
        radiusAxis: {
            min: 0
        },
        series: [{
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
        }],
        animationDuration: 2000
    };

    return (
      <div>
        <ReactEcharts
          option={option}
          style={{height: '50vh', width: '100%'}}
         />
      </div>
    );
}
export default Line;
